<!DOCTYPE html>
<html>

<head>
	<meta charset="utf-8">
	<title>绿地养护</title>
	<meta name="viewport" content="maximum-scale=1.0,minimum-scale=1.0,user-scalable=0,width=device-width,initial-scale=1.0" />
	<meta name="format-detection" content="telephone=no,email=no,date=no,address=no">
	<link rel="stylesheet" type="text/css" href="../../css/api.css" />
	<link rel="stylesheet" type="text/css" href="../../css/globle.css" />
	<script src="http://www.jq22.com/jquery/jquery-1.10.2.js"></script>
	<link rel="stylesheet" type="text/css" href="../../css/common.css" />
	<style>
		span {
			margin: 10px;
		}

		.Tabl {
			height: 30px;
			width: 88%;
			font-size: 14px;

			text-align: left;
			margin-left: 6%;
		}

		.Td1 {
			font-weight: bold;
			color: #B8B8B8;
			width: 110px;
			font-size: 13px;
		}

		.Td2 {
			color: #000000;
			text-align: left;
			font-size: 13px;
			color: rgb(85,85,85);
		}

		.Hr {
			height: 1px;
			width: 96%;
			background-color: #D8D8D8;
			margin-left: 2%;
		}

		.Butt {
			border: 1px solid #B8B8B8;
			border-radius: 20px;
			color: #FFFFFF;
			height: 17px;
			width: 17px;
			outline: none;
		}

		.TabImg {
			height: 150px;
			width: 96%;
			margin-left: 2%;
			border: 10px solid #D8D8D8;
		}

		.TdImg1 {
			height: 110px;
			width: 90px;
		}

		.TdImg2 {
			height: 110px;
			width: 90px;
		}

		.ButAdd {
			height: 110px;
			width: 100px;
			font-size: 100px;
			color: #FFFFFF;
			background-color: #B8B8B8;
		}

		.TabL {
			height: 75px;
			width: 88%;
			font-size: 16px;
			font-weight: bold;
			text-align: left;
			margin-left: 6%;
		}

		.ButL {
			height: 40px;
			width: 100%;
			background-color: #D0D0D0;
			position: fixed;
			bottom: 0;
		}

		.Td3 {
			text-align: center;
			width: 50%;
		}

		html,
		body {
			background-color: #F5F6F6;
		}

		ul {
			position: relative;
			width: 100%;
		}

		ul li {
			list-style: none;
		}

		ul li input {
			display: none;
		}

		ul li label {
			float: left;
			width: 33%;
			text-align: center;
			line-height: 34px;
			height: 35px;
			border-right: 0;
			box-sizing: border-box;
			cursor: pointer;
			transition: all .3s;
			background-color: #1abc9c;
			color: #fff;
		}

		ul li input:checked+label {
			color: #000;
			background-color: #F5F6F6;
		}

		ul li:last-child label {
			border-right: 1px solid #1abc9c;
		}

		ul li .content {
			opacity: 0;
			visibility: hidden;
			position: absolute;
			left: 0;
			top: 31px;
			width: 100%;
			height: auto;
			box-sizing: border-box;
			transition: all .3s;
		}

		ul li .content table {
			width: 100%
		}

		ul li .content td {
			border-bottom: 1px solid #DFE0E0;
			height: 60px;
		}

		ul li .content td:nth-child(1) {
			padding-left: 10px;
		}

		ul li .content td:nth-child(1) p:nth-child(2) {
			color: #555555
		}

		ul li:nth-child(1) .content {
			background-color: #F5F6F6;
		}

		ul li:nth-child(2) .content {
			background-color: #F5F6F6;
		}

		ul li:nth-child(3) .content {
			background-color: #F5F6F6;
		}

		ul li input:checked~.content {
			opacity: 1;
			visibility: visible;
		}

		.Add {
			height: 40px;
			width: 96%;
			background-color: #1ABC9C;
			color: white;
			text-align: center;
			font-size: 15px;
			margin-top: 20px;
			outline: none;
		}

		.fontcolr {
			color: #cccccc
		}

		.clickfont {
			color: #72EDD1
		}

		.remark {
			font-size: 26px;
			color: red;
			font-weight: bold;
			display: none;
		}

		#imgBox img {
			display: block;
			width: 80%;
			margin: 30px auto;
		}

		#fullPage {
			display: none;
			background: black;
			position: fixed;
			top: 0;
			left: 0;
			width: 100%;
			height: 100%;
			z-index: 19930428;
		}

		#fullPage img {
			display: block;
			width: 100%;
		}

		#canvas {
			width: 100%;
			height: 100%;
			background: none;
			display: block;
		}
		.aa{
			width: 45%;
			height: 30px;
			float: left;
			font-size: 18px;
			background-color: #FFFFFF;
		}

		.ab{
			width: 100%;
			color: #797979;
			float: left;
			margin-top: 5px
		}
		.ab span{
			margin-left: 30px;
			font-size: 16px
		}
	</style>
</head>

<body>
	<ul>
		<li>
			<input id="tab1" type="radio" name="tab"  checked>
			<label for="tab1">绿地信息</label>
			<div class="content">
			<button style="background-color: #e4e4e4;height: 40px;width: 100%;font-size: 18px;">基本信息</button>
				<table class="Tabl">
					<tr>
						<td class="Td1">绿地名称</td>
						<td class="Td2" id="name"><span style="color:#FF8C00"></span></td>
					</tr>
				</table>
				<hr class="Hr" />
				<table class="Tabl">
					<tr>
						<td class="Td1">绿地分类</td>
						<td class="Td2" id="dataClassify"><span style="color:#FF8C00"><!--{{todo.greenlandCategory}}--></span></td>
					</tr>
				</table>
				<hr class="Hr" />
				<table class="Tabl">
					<tr>
						<td class="Td1">绿地类型</td>
						<td class="Td2" id="type"><span style="color:#FF8C00"><!--{{todo.greenlandCategory}}--></span></td>
					</tr>
				</table>
				<hr class="Hr" />
				<table class="Tabl">
					<tr>
						<td class="Td1">建成时间</td>
						<td class="Td2" id="buildTime"></td>
					</tr>
				</table>
				<hr class="Hr" />
				<table class="Tabl">
					<tr>
						<td class="Td1">绿地面积</td>
						<td class="Td2" id="grossLandArea"><span style="color:#FF8C00"><!--{{todo.grossLandArea}}--></span></td>
					</tr>
				</table>
				<hr class="Hr" />
				<table class="Tabl">
					<tr>
						<td class="Td1">养护级别</td>
						<td class="Td2" style="color:#FF6633" id="conserveRank"><span ><!--{{todo.conserveRank}}--></span></td>
					</tr>
				</table>
				<button style="background-color: #e4e4e4;height: 40px;width: 100%;font-size: 18px;">图片信息</button>
				<div style="padding: 10px;">
					<div id="imgBox1"></div>
					<div style="width: 80%;position: absolute;right: 10%;left:10%;top: 20%;z-index: 1000000;text-align: center;"
						 id="bigImage"></div>
				</div>
			</div>
		</li>
		<li>
			<input id="tab2" type="radio"  name="tab">
			<label for="tab2">植物管理</label>
			<div class="content" id="qqq">
				<div   v-for="(tood, index) in todos" style="background-color: rgb(240,239,244);margin-top: 10px;height: 120px">
					<div style="width: 10%;height: 30px;float: left;background-color: #FFFFFF;">
						<img src="../../image/treeac.png" style="width:20px;height: auto;margin-top: 5px;margin-left: 20px"/>
					</div>
					<div class="aa">
						<span style="margin-top: 3px;margin-left:5px;font-size: 13px">{{tood.name}}</span>
					</div>
					<div class="aa" style="text-align: right;" v-on:click="lvdizhiwu(tood.id)">
						<span style="margin-right: 10px;color: #00bbd4;margin-top: 5px;font-size: 13px">查看详情  ></span>
					</div>
					<div class="ab"><span style="font-size: 13px">类别：{{tood.plantType.name}}</span></div>
					<div class="ab"><span style="font-size: 13px">数量：{{tood.quantity}}</span></div>
				</div>
			</div>
		</li>
		<li>
			<input id="tab3" type="radio" name="tab">
			<label for="tab3">统计分析</label>
			<div class="content">
				<table class="Tabl" id="qqq111">
					<thead>
						<tr>
							<td >
								类别
							</td>
							<td>
								数量(株)
							</td>
							<td >
							面积(㎡)
							</td>
						</tr>
					</thead>
				<tbody  id="tj">

				</tbody>
				<tfoot>
                <tr>
                    <td >总计</td>
                    <td id="zj"></td>
                    <td id="mj"></td>
                </tr>
                </tfoot>
				</table>
				<table>
					<tr>
						<td style="width: 100%">
							<div id="container" style="height: 200px"></div>
						</td>
					</tr>
					<tr>
						<td style="width: 100%">
							<div id="container1" style="height: 200px"></div>
						</td>
					</tr>

				</table>
			</div>
		</li>
	</ul>
</body>
<script src="../../script/webuploader.min.js"></script>
<script src="../../script/diyUpload.js"></script>
<script src="../../script/vue.js"></script>
<script type="text/javascript" src="../../script/mui.min.js"></script>
<script src="../../script/jquery.js"></script>
<script src="../../script/common.js"></script>
<script type="text/javascript" src="../../script/api.js"></script>
<script type="text/javascript" src="https://cdn.jsdelivr.net/npm/echarts/dist/echarts.min.js"></script>
<script type="text/javascript">
	var map = null;
	var arr=[];
	apiready = function() {


			var	id = api.pageParam.id;
			//片区id
			var areaid = $api.getStorage('selectpor').id
			//项目id
			var proid = $api.getStorage('userSession').data.proId;
			//企业id
			var enterpriseid = $api.getStorage('userSession').data.enterprise.id;
				//绿地信息
				$.ajax({
					type: "post",
					async : false, //同步执行
					url:  BaseServiceUrl + "mobile/greedLand/view.json",
					data: {
						id: id
					},
					dataType: "json", //返回数据形式为json
					success: function(result) {
						var data=result.data
						$("#name").html(data.greedLandAdministrator.name);
						$("#greenlandCategory").html(data.greenlandCategory);
						$("#grossLandArea").html(data.grossLandArea);
						$("#buildTime").html(data.buildTime);
						if(data.dataClassify=='0'){
									$("#dataClassify").html("专业")
							}else{
									$("#dataClassify").html("植群")
							}
							if(data.type=='0'){
									$("#type").html("基础公园")
							}else if(data.type=='1'){
									$("#type").html("综合公园")
							}else{
									$("#type").html("社区公园")
							}

							if(data.conserveRank=='0'){
									$("#conserveRank").html("特级")
							}else if(data.conserveRank=='1'){
									$("#conserveRank").html("一级")
							}else if(data.conserveRank=='2'){
									$("#conserveRank").html("二级")
							}else{
									$("#conserveRank").html("三级")
							}

							 for (var i = 0; i < result.data.greedLandPhotoList.length; i++) {
								$("#imgBox1").append("<div style=\"margin-left:5px;float:left;margin-top:5px;\"><img width=\"130\" height=\"130\"  onclick='showBig(this)'src=\"" +BaseServiceUrl +  result.data.greedLandPhotoList[i].photo  + "\"\/><\/div>");
							}
					}
				});
				//绿地植物信息列表
				var app = new Vue({
						el: '#qqq',
						data: {
							todos: []
						},
						created: function() {
							$.ajax({
								type: "post",
								//async : false, //同步执行
								url:BaseServiceUrl + "mobile/plant/list.json",
								data: {
									areaid : areaid,
									proid : proid,
									greedLandid: id
								},
								dataType: "json", //返回数据形式为json
								success: function(result) {
									for (var i = 0; i < result.data.length; i++) {
										app.todos.push(result.data[i])
									}
								}
							});
						}
					})



								$.ajax({
				             url:BaseServiceUrl +"mobile/plant/typetrees.json",
				             type: "POST",
				             data: {
											areaid : areaid,
											proid : proid,
				              greedLandid:id,
											enterpriseid:enterpriseid
				             },
				             dataType: "json",
				             success: function (ret) {
				                 var data=ret.data;
				                 var h="";
				                 var zj=0; //数量
				                 var mj=0; //面积
				                 var area;
				                 var servicedata=[]; //数量echartdata
				                 var mservicedata=[]; //面积echartdata
				                 for(var i=0;i<data.length;i++){
				                     if(data[i].area!=null){
				                         area=data[i].area
				                     }else{
				                         area=0.0
				                     }
				                     h+="<tr><td>"+data[i].name+"</td><td>"+data[i].state+"</td><td>"+area+"</td></tr>";
				                     $("#tj").html(h);
				                     zj+=data[i].state;
				                     mj+=data[i].area;
				                     //数量
				                     var obj={};
				                     obj.value=data[i].state;
				                     obj.name=data[i].name;
				                     servicedata[i]=obj;
				                     //面积
				                     var mobj={};
				                     mobj.value=data[i].area;
				                     mobj.name=data[i].name;
				                     mservicedata[i]=mobj;
				                 }
				                 //总计赋值
				                 $("#zj").html(zj);
				                 $("#mj").html(mj);

				                 //数量图
				                 var dom = document.getElementById("container");
				                 var myChart = echarts.init(dom);
				                 var app = {};
				                 option = null;
				                 option = {
				                     title: {
				                         text: '植物数量占比',
				                         subtext: '植物类型',
				                         left: 'center'
				                     },
				                     tooltip: {
				                         trigger: 'item',
				                         formatter: '{a} <br/>{b} : {c} ({d}%)'
				                     },
				                     series: [
				                         {
				                             name: '植物数量',
				                             type: 'pie',
				                             radius: '55%',
				                             center: ['50%', '60%'],
				                             data:servicedata,
				                             emphasis: {
				                                 itemStyle: {
				                                     shadowBlur: 10,
				                                     shadowOffsetX: 0,
				                                     shadowColor: 'rgba(0, 0, 0, 0.5)'
				                                 }
				                             }
				                         }
				                     ]
				                 };
				                 if (option && typeof option === "object") {
				                     myChart.setOption(option, true);
				                 }

				                 //面积图
				                 var dom1 = document.getElementById("container1");
				                 var myChart1 = echarts.init(dom1);
				                 var app = {};
				                 option = null;
				                 option = {
				                     title: {
				                         text: '植物面积占比',
				                         subtext: '植物类型',
				                         left: 'center'
				                     },
				                     tooltip: {
				                         trigger: 'item',
				                         formatter: '{a} <br/>{b} : {c} ({d}%)'
				                     },
				                     series: [
				                         {
				                             name: '植物面积',
				                             type: 'pie',
				                             radius: '55%',
				                             center: ['50%', '60%'],
				                             data:mservicedata,
				                             emphasis: {
				                                 itemStyle: {
				                                     shadowBlur: 10,
				                                     shadowOffsetX: 0,
				                                     shadowColor: 'rgba(0, 0, 0, 0.5)'
				                                 }
				                             }
				                         }
				                     ]
				                 };
				                 if (option && typeof option === "object") {
				                     myChart1.setOption(option, true);
				                 }

				             },
				             error: function (jqXHR, textStatus, errorThrown) {
				             }
				         });

	};


	function lvdizhiwu(id) {
		api.openWin({
			name: 'xxxxx',
			url: 'lvdizhiwu_window.html',
			rect: {
				x: 0,
				y: 75,
				w: 'auto',
				h: 'auto'
			},
			pageParam: {
				id: id
			}, //传递参数
			bounces: true,
			delay: 200
		});
	}
	function showBig(t) {
		document.getElementById("bigImage").innerHTML = "<img src='" + t.src + "' onclick='closeBig(this)'  width='100%' style='border:3px solid #4f4f4f;'/>";
	}

	function closeBig(t) {
		document.getElementById("bigImage").innerHTML = "";
	}





</script>

</html>
